<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/customer/personal.css">
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <!--======================== header ========================= -->
        <div id="header">
            <div class="logo">
                <a href="">随风</a>
                <img src="../images/index/logo.jpg" alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">去旅行</a></li>
                    <li><a href="">个人中心</a></li>
                    <a href="javascript:void(0)" class="box">
                        <input type="text" class="box-search">
                    </a>
                    <div class="search-btn">
                        <a class="btn" href="javascript:void(0)">
                            <i class="icon-search"></i>
                        </a>
                    </div>
                </ul>
            </div>
            <div class="login">
                <a href="login.html">登录</a>
                <span class="split">|</span>
                <a href="registe.html">注册</a>
            </div>
        </div>
        <div class="banner">
            <img src="../images/person-banner.jpg">
        </div>
        <div class="nav-list">
            <ul>
                <li><a href="#" @click.prevent="showSection('personalInfo')">个人信息</a></li>
                <li><a href="#" @click.prevent="showSection('myOrders')">我的订单</a></li>
                <li><a href="#" @click.prevent="showSection('myCoupons')">我的优惠券</a></li>
                <li><a href="#" @click.prevent="showSection('notifications')">消息通知</a></li>
            </ul>
        </div>

        <div id="personalInfo" class="section1" v-show="currentSection === 'personalInfo'">
            <h2>个人信息</h2>
            <el-descriptions title="用户信息">
                <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
                <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
                <el-descriptions-item label="邮箱">john.doe@example.com</el-descriptions-item>
                <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
            </el-descriptions>
        </div>

        <div id="myOrders" class="section" v-show="currentSection === 'myOrders'">
            <h2>我的订单</h2>
            <ul class="order-nav">
                <li><a href="#" @click.prevent="showOrdersSubSection('purchasedOrders')">全部</a></li>
                <li><a href="#" @click.prevent="showOrdersSubSection('orderDetails')">待支付</a></li>
                <li><a href="#" @click.prevent="showOrdersSubSection('orderStatus')">待出行</a></li>
                <li><a href="#" @click.prevent="showOrdersSubSection('modifyCancel')">待点评</a></li>
                <li><a href="#" @click.prevent="showOrdersSubSection('orderCancel')">取消</a></li>
            </ul>
            <div v-show="currentOrderSubSection === 'purchasedOrders'" class="orders-subsection">
                <div class="order-info">
                    <div class="order-header">
                        <span>订单号：24872182024090840117813</span>
                        <span>下单时间：2024-09-08 20:12:40</span>
                    </div>
                    <div class="order-details">
                        <div class="order-description">
                            <p class="p1">【深度经典】苏州 园林钓玩一日游-双5A景区（拙政园+狮子林+赛山…</p>
                            <p>成人 × 1</p>
                        </div>
                        <div class="order-meta">
                            <span>类型：当日玩乐</span>
                            <span>出行日期：2024-09-09</span>
                            <span>支付金额：<strong>¥98.00</strong></span>
                            <span>订单状态：已关闭</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button>删除订单</button>
                        <button>查看订单</button>
                        <button>重新预订</button>
                    </div>
                </div>
            </div>
            <div v-show="currentOrderSubSection === 'orderDetails'" class="orders-subsection">
                <div class="order-info">
                    <div class="order-header">
                        <span>订单号：24872182024090840117813</span>
                        <span>下单时间：2024-09-08 20:12:40</span>
                    </div>
                    <div class="order-details">
                        <div class="order-description">
                            <p class="p1">【深度经典】苏州 园林钓玩一日游-双5A景区（拙政园+狮子林+赛山…</p>
                            <p>成人 × 1</p>
                        </div>
                        <div class="order-meta">
                            <span>类型：当日玩乐</span>
                            <span>出行日期：2024-09-09</span>
                            <span>支付金额：<strong>¥98.00</strong></span>
                            <span>订单状态：已关闭</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button>删除订单</button>
                        <button>查看订单</button>
                        <button>重新预订</button>
                    </div>
                </div>
            </div>
            <div v-show="currentOrderSubSection === 'orderStatus'" class="orders-subsection">
                <div class="order-info">
                    <div class="order-header">
                        <span>订单号：24872182024090840117813</span>
                        <span>下单时间：2024-09-08 20:12:40</span>
                    </div>
                    <div class="order-details">
                        <div class="order-description">
                            <p class="p1">【深度经典】苏州 园林钓玩一日游-双5A景区（拙政园+狮子林+赛山…</p>
                            <p>成人 × 1</p>
                        </div>
                        <div class="order-meta">
                            <span>类型：当日玩乐</span>
                            <span>出行日期：2024-09-09</span>
                            <span>支付金额：<strong>¥98.00</strong></span>
                            <span>订单状态：已关闭</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button>删除订单</button>
                        <button>查看订单</button>
                        <button>重新预订</button>
                    </div>
                </div>
            </div>
            <div v-show="currentOrderSubSection === 'modifyCancel'" class="orders-subsection">
                <div class="order-info">
                    <div class="order-header">
                        <span>订单号：24872182024090840117813</span>
                        <span>下单时间：2024-09-08 20:12:40</span>
                    </div>
                    <div class="order-details">
                        <div class="order-description">
                            <p class="p1">【深度经典】苏州 园林钓玩一日游-双5A景区（拙政园+狮子林+赛山…</p>
                            <p>成人 × 1</p>
                        </div>
                        <div class="order-meta">
                            <span>类型：当日玩乐</span>
                            <span>出行日期：2024-09-09</span>
                            <span>支付金额：<strong>¥98.00</strong></span>
                            <span>订单状态：已关闭</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button>删除订单</button>
                        <button>查看订单</button>
                        <button>重新预订</button>
                    </div>
                </div>
            </div>
            <div v-show="currentOrderSubSection === 'orderCancel'" class="orders-subsection">
                <div class="order-info">
                    <div class="order-header">
                        <span>订单号：24872182024090840117813</span>
                        <span>下单时间：2024-09-08 20:12:40</span>
                    </div>
                    <div class="order-details">
                        <div class="order-description">
                            <p class="p1">【深度经典】苏州 园林钓玩一日游-双5A景区（拙政园+狮子林+赛山…</p>
                            <p>成人 × 1</p>
                        </div>
                        <div class="order-meta">
                            <span>类型：当日玩乐</span>
                            <span>出行日期：2024-09-09</span>
                            <span>支付金额：<strong>¥98.00</strong></span>
                            <span>订单状态：已关闭</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button>删除订单</button>
                        <button>查看订单</button>
                        <button>重新预订</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="myCoupons" class="section" v-show="currentSection === 'myCoupons'">
            <h2>我的优惠券</h2>
            <ul class="coupon-nav">
                <li><a href="javascript:void(0)" @click.prevent="showCouponsSubSection('couponList')">领取优惠券列表</a></li>
                <li><a href="javascript:void(0)" @click.prevent="showCouponsSubSection('couponUsage')">优惠券使用记录</a></li>
            </ul>
            <div v-show="currentCouponSubSection === 'couponList'" class="coupons-subsection">
                <h3>可领取优惠券</h3>
                <div class="coupon-item" v-for="coupon in coupons">  
                    <div class="coupon-header">  
                        <span class="coupon-amount">{{ coupon.amount }}</span>  
                        <span class="coupon-usage">满{{ coupon.minAmount }}元可用</span>  
                    </div>  
                    <h4 class="coupon-title">{{ coupon.type }}</h4> 
                    <p class="coupon-quantity">优惠券数量：{{ coupon.quantity }}</p>
                    <p class="coupon-dates">{{ coupon.startDate }} - {{ coupon.endDate }}</p>  
                    <a href="javascript:void(0)" class="btn-claim">领取</a>  
                </div>
            </div>
            <div v-show="currentCouponSubSection === 'couponUsage'" class="coupons-subsection">
                <h3>已领的优惠券</h3>
                <div class="coupon-item" v-for="coupon in coupons">  
                    <div class="coupon-header">  
                        <span class="coupon-amount">{{ coupon.amount }}</span>  
                        <span class="coupon-usage">满{{ coupon.minAmount }}元可用</span>  
                    </div>  
                    <h4 class="coupon-title">{{ coupon.type }}</h4> 
                    <p class="coupon-quantity">优惠券数量：{{ coupon.quantity }}</p>
                    <p class="coupon-dates">{{ coupon.startDate }} - {{ coupon.endDate }}</p>  
                    <a href="javascript:void(0)" class="btn-claim">领取</a>  
                </div>
            </div>
        </div>
        <div v-show="currentSection === 'notifications'" class="section">
            <h2>消息通知</h2>
            <ul class="notification-nav">
                <li><a href="javascript:void(0)" @click.prevent="showNotificationsSubSection('systemNotifications')">系统通知</a></li>
            </ul>
            <div v-show="currentNotificationSubSection === 'systemNotifications'" class="notifications-subsection">
                <h3>系统通知</h3>
                <p>这里展示系统通知。</p>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../js/customer/personal.js"></script>